<template><div><h2 id="列的显示和扩展" tabindex="-1"><a class="header-anchor" href="#列的显示和扩展"><span>列的显示和扩展</span></a></h2>
<p>数据表格内置了很多对于列的操作方法，可以通过这些方法很灵活的操作列数据。</p>
<h2 id="根据条件显示不同的组件" tabindex="-1"><a class="header-anchor" href="#根据条件显示不同的组件"><span>根据条件显示不同的组件</span></a></h2>
<p>有些情况我们需要根据某个条件去判断是否使用列的某个显示功能：</p>
<blockquote>
<p>需要注意的是，<code v-pre>Grid\Column::if</code>只对列的显示相关功能有效，其他方法如表头的相关操作都不能使用此方法！</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'config'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">if</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 获取当前行其他字段值</span></span>
<span class="line">        <span class="token variable">$username</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">username</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// $column->getValue() 是当前字段的值</span></span>
<span class="line">        <span class="token comment">// 返回 "真" 或 "假"，"真" 则执行 "if" 后面的代码</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token constant boolean">true</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token variable">$view</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">copyable</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">else</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面写法等同于</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'config'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">if</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Column</span> <span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token variable">$view</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">copyable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">else</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Column</span> <span class="token variable">$column</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$column</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>支持多个<code v-pre>if</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'config'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">if</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">then</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">else</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">-></span><span class="token function">if</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">then</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">else</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>终结条件判断<code v-pre>end</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'status'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">if</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span> <span class="token comment">// 条件1</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">-></span><span class="token function">if</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span> <span class="token comment">// 条件2</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">-></span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 终结前面的条件判断</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 所有条件都能生效</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="列显示" tabindex="-1"><a class="header-anchor" href="#列显示"><span>列显示</span></a></h2>
<p><code v-pre>model-grid</code>内置了若干方法来帮助你扩展列功能</p>
<h3 id="display" tabindex="-1"><a class="header-anchor" href="#display"><span>display</span></a></h3>
<p><code v-pre>Dcat\Admin\Grid\Column</code>对象内置了<code v-pre>display()</code>方法来通过传入的回调函数来处理当前列的值，</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;span style='color:blue'><span class="token interpolation"><span class="token variable">$title</span></span>&lt;/span>"</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在传入的匿名函数中可以通过任何方式对数据进行处理，另外匿名函数绑定了当前列的数据作为父对象，可以在函数中调用当前行的数据：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'first_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'last_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 不存在的`full_name`字段</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'full_name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">first_name</span> <span class="token operator">.</span> <span class="token string single-quoted-string">' '</span> <span class="token operator">.</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">last_name</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置列的html属性" tabindex="-1"><a class="header-anchor" href="#设置列的html属性"><span>设置列的HTML属性</span></a></h3>
<p>设列的<code v-pre>html</code>属性</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">setAttributes</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'style'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'font-size:14px'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="列视图" tabindex="-1"><a class="header-anchor" href="#列视图"><span>列视图</span></a></h3>
<p><code v-pre>view</code>方法可以引入一个视图文件。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.fields.content'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>默认会传入视图的三个变量：</p>
<ul>
<li><code v-pre>$model</code> 当前行数据</li>
<li><code v-pre>$name</code> 字段名称</li>
<li><code v-pre>$value</code> 为当前列的值</li>
</ul>
<p>模板代码如下：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;label&gt;名称：{{ $name }}&lt;/label&gt;</span>
<span class="line">&lt;label&gt;值：{{ $value }}&lt;/label&gt;</span>
<span class="line">&lt;label&gt;其他字段：{{ $model-&gt;title }}&lt;/label&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="图片" tabindex="-1"><a class="header-anchor" href="#图片"><span>图片</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'picture'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//设置服务器和宽高</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'picture'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'http://xxx.com'</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 显示多图</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'pictures'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$pictures</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">json_decode</span><span class="token punctuation">(</span><span class="token variable">$pictures</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'http://xxx.com'</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="显示label标签" tabindex="-1"><a class="header-anchor" href="#显示label标签"><span>显示label标签</span></a></h3>
<p>支持<code v-pre>Dcat\Admin\Color</code>类中内置的所有颜色</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置颜色，直接传别名</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'danger'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 也可以这样使用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">danger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 也可以直接传颜色代码</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#222'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>给不同的值设置不同的颜色</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'state'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">using</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'未处理'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已处理'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'default'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token comment">// 设置默认颜色，不设置则默认为 default</span></span>
<span class="line"></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'danger'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'success'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">4</span> <span class="token operator">=></span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="显示badge标签" tabindex="-1"><a class="header-anchor" href="#显示badge标签"><span>显示badge标签</span></a></h3>
<p>支持<code v-pre>Dcat\Admin\Color</code>类中内置的所有颜色</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">badge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置颜色，直接传别名</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">badge</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'danger'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 也可以这样使用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">badge</span><span class="token punctuation">(</span><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">danger</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 也可以直接传颜色代码</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">badge</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#222'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>给不同的值设置不同的颜色</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">state</span><span class="token operator">-></span><span class="token function">using</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'未处理'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已处理'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">badge</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'default'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span> <span class="token comment">// 设置默认颜色，不设置则默认为 default    </span></span>
<span class="line"></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'danger'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'success'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">4</span> <span class="token operator">=></span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="布尔值显示-bool" tabindex="-1"><a class="header-anchor" href="#布尔值显示-bool"><span>布尔值显示 (bool)</span></a></h3>
<p>将这一列转为<code v-pre>bool</code>值之后显示为<code v-pre>✓</code>和<code v-pre>✗</code>。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'approved'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token keyword type-declaration">bool</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你也可以按照这一列的值指定显示，比如字段的值为<code v-pre>Y</code>和<code v-pre>N</code>表示<code v-pre>true</code>和<code v-pre>false</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'approved'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token keyword type-declaration">bool</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'Y'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'N'</span> <span class="token operator">=></span> <span class="token constant boolean">false</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>效果<br>
<img src="https://cdn.learnku.com/uploads/images/202007/12/38389/U0OSrJwzyt.png!large" alt=""></p>
<h3 id="圆点前缀-dot" tabindex="-1"><a class="header-anchor" href="#圆点前缀-dot"><span>圆点前缀 (dot)</span></a></h3>
<p>通过<code v-pre>dot</code>方法可以在列文字前面加上一个带颜色的圆点</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'state'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">using</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'未处理'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已处理'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">dot</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token punctuation">[</span></span>
<span class="line">            <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'primary'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'danger'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'success'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token number">4</span> <span class="token operator">=></span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">info</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">,</span> </span>
<span class="line">        <span class="token string single-quoted-string">'primary'</span> <span class="token comment">// 第二个参数为默认值</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="https://cdn.learnku.com/uploads/images/202004/30/38389/ByUqo6bZc8.png!large" alt=""></p>
<h3 id="列展开-expand" tabindex="-1"><a class="header-anchor" href="#列展开-expand"><span>列展开 (expand)</span></a></h3>
<p><code v-pre>expand</code>方法可以把内容隐藏，点击按钮的时候显示在表格下一行</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Card</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'详情'</span><span class="token punctuation">)</span> <span class="token comment">// 设置按钮名称</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">expand</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 返回显示的详情</span></span>
<span class="line">        <span class="token comment">// 这里返回 content 字段内容，并用 Card 包裹起来</span></span>
<span class="line">        <span class="token variable">$card</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Card</span><span class="token punctuation">(</span><span class="token constant">null</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">content</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;div style='padding:10px 10px 0'><span class="token interpolation"><span class="token variable">$card</span></span>&lt;/div>"</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也可以通过以下方式设置按钮</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Card</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">expand</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Displayers<span class="token punctuation">\</span>Expand</span> <span class="token variable">$expand</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 设置按钮名称</span></span>
<span class="line">    <span class="token variable">$expand</span><span class="token operator">-></span><span class="token function">button</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'详情'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 返回显示的详情</span></span>
<span class="line">    <span class="token comment">// 这里返回 content 字段内容，并用 Card 包裹起来</span></span>
<span class="line">    <span class="token variable">$card</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Card</span><span class="token punctuation">(</span><span class="token constant">null</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">content</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;div style='padding:10px 10px 0'><span class="token interpolation"><span class="token variable">$card</span></span>&lt;/div>"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="异步加载" tabindex="-1"><a class="header-anchor" href="#异步加载"><span>异步加载</span></a></h4>
<blockquote>
<p>更多用法请参考文档<a href="https://learnku.com/docs/dcat-admin/2.x/asynchronous-loading/9327" target="_blank" rel="noopener noreferrer">异步加载</a></p>
</blockquote>
<p>定义渲染类，继承<code v-pre>Dcat\Admin\Support\LazyRenderable</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Post</span> <span class="token keyword">as</span> PostModel<span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>LazyRenderable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Table</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Post</span> <span class="token keyword">extends</span> <span class="token class-name">LazyRenderable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 获取ID</span></span>
<span class="line">        <span class="token variable">$id</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">key</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 获取其他自定义参数</span></span>
<span class="line">        <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">post_type</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$data</span> <span class="token operator">=</span> <span class="token class-name static-context">PostModel</span><span class="token operator">::</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user_id'</span><span class="token punctuation">,</span> <span class="token variable">$id</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'type'</span><span class="token punctuation">,</span> <span class="token variable">$type</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'body'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'body'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'created_at'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$titles</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'User ID'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'Title'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'Body'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'Created At'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Table</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$titles</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">post</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'View'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">expand</span><span class="token punctuation">(</span><span class="token class-name static-context">Post</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'post_type'</span> <span class="token operator">=></span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 可以在闭包内返回异步加载类的实例</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">post</span><span class="token operator">-></span><span class="token function">expand</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 允许在闭包内返回异步加载类的实例</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Post</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">title</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="https://cdn.learnku.com/uploads/images/202006/14/38389/KMHagem4OZ.gif!large" alt=""></p>
<h4 id="异步加载工具表单" tabindex="-1"><a class="header-anchor" href="#异步加载工具表单"><span>异步加载工具表单</span></a></h4>
<p>定义<a href="https://learnku.com/docs/dcat-admin/1.x/tools-form/8125" target="_blank" rel="noopener noreferrer">工具表单</a>类如下</p>
<blockquote>
<p>{tip} 更多用法请参考<a href="https://learnku.com/docs/dcat-admin/2.x/asynchronous-loading/9327" target="_blank" rel="noopener noreferrer">异步加载</a></p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Forms</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Contracts<span class="token punctuation">\</span>LazyRenderable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>LazyWidget</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserProfile</span> <span class="token keyword">extends</span> <span class="token class-name">Form</span> <span class="token keyword">implements</span> <span class="token class-name">LazyRenderable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">LazyWidget</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$input</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 接收外部传递参数</span></span>
<span class="line">        <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">payload</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token constant">null</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'保存成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 接收外部传递参数</span></span>
<span class="line">        <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">payload</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token constant">null</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'用户昵称'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avatar'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.avatar'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">autoUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">password</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'old_password'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.old_password'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">password</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.password'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">minLength</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">maxLength</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$v</span> <span class="token operator">==</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token keyword">return</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token variable">$v</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'请输入5-20个字符'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">password</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password_confirmation'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.password_confirmation'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">same</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'请输入确认密码'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">user</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'View'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">expand</span><span class="token punctuation">(</span><span class="token class-name static-context">UserProfile</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span> <span class="token operator">=></span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="弹出模态框-modal" tabindex="-1"><a class="header-anchor" href="#弹出模态框-modal"><span>弹出模态框 (modal)</span></a></h3>
<p><code v-pre>modal</code>方法可以把内容隐藏，点击按钮的时候显示在模态框中</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Card</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'查看'</span><span class="token punctuation">)</span> <span class="token comment">// 设置按钮名称</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">modal</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$modal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 设置弹窗标题</span></span>
<span class="line">        <span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'标题 '</span><span class="token operator">.</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">username</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 自定义图标</span></span>
<span class="line">        <span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">icon</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'feather icon-x'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$card</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Card</span><span class="token punctuation">(</span><span class="token constant">null</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">content</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;div style='padding:10px 10px 0'><span class="token interpolation"><span class="token variable">$card</span></span>&lt;/div>"</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 也可以通过这种方式设置弹窗标题</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'查看'</span><span class="token punctuation">)</span> <span class="token comment">// 设置按钮名称</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">modal</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'弹窗标题'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="异步加载-1" tabindex="-1"><a class="header-anchor" href="#异步加载-1"><span>异步加载</span></a></h4>
<blockquote>
<p>更多用法请参考文档<a href="https://learnku.com/docs/dcat-admin/2.x/asynchronous-loading/9327" target="_blank" rel="noopener noreferrer">异步加载</a></p>
</blockquote>
<p>定义渲染类，继承<code v-pre>Dcat\Admin\Support\LazyRenderable</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Post</span> <span class="token keyword">as</span> PostModel<span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>LazyRenderable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Table</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Post</span> <span class="token keyword">extends</span> <span class="token class-name">LazyRenderable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 获取ID</span></span>
<span class="line">        <span class="token variable">$id</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">key</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 获取其他自定义参数</span></span>
<span class="line">        <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">post_type</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$data</span> <span class="token operator">=</span> <span class="token class-name static-context">PostModel</span><span class="token operator">::</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user_id'</span><span class="token punctuation">,</span> <span class="token variable">$id</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'type'</span><span class="token punctuation">,</span> <span class="token variable">$type</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'body'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'body'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'created_at'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$titles</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'User ID'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'Title'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'Body'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'Created At'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Table</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$titles</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">post</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'View'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">modal</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Post'</span><span class="token punctuation">,</span> <span class="token class-name static-context">Post</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'post_type'</span> <span class="token operator">=></span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 可以在闭包内返回异步加载类的实例</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">post</span><span class="token operator">-></span><span class="token function">modal</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$modal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'自定义弹窗标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 允许在闭包内返回异步加载类的实例</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Post</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">title</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="https://cdn.learnku.com/uploads/images/202006/14/38389/DvvyZUTXpG.gif!large" alt=""></p>
<h4 id="异步加载工具表单-1" tabindex="-1"><a class="header-anchor" href="#异步加载工具表单-1"><span>异步加载工具表单</span></a></h4>
<p>定义<a href="https://learnku.com/docs/dcat-admin/2.x/tools-form/8125" target="_blank" rel="noopener noreferrer">工具表单</a>类如下</p>
<blockquote>
<p>更多用法请参考<a href="https://learnku.com/docs/dcat-admin/2.x/asynchronous-loading/9327" target="_blank" rel="noopener noreferrer">异步加载</a></p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Forms</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Contracts<span class="token punctuation">\</span>LazyRenderable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>LazyWidget</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Form</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserProfile</span> <span class="token keyword">extends</span> <span class="token class-name">Form</span> <span class="token keyword">implements</span> <span class="token class-name">LazyRenderable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">LazyWidget</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token keyword type-hint">array</span> <span class="token variable">$input</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 接收外部传递参数</span></span>
<span class="line">        <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">payload</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token constant">null</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'保存成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">form</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 接收外部传递参数</span></span>
<span class="line">        <span class="token variable">$type</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">payload</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span><span class="token punctuation">]</span> <span class="token operator">??</span> <span class="token constant">null</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'用户昵称'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'avatar'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.avatar'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">autoUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">password</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'old_password'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.old_password'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">password</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.password'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">minLength</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">maxLength</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$v</span> <span class="token operator">==</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token keyword">return</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token variable">$v</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'请输入5-20个字符'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">password</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password_confirmation'</span><span class="token punctuation">,</span> <span class="token function">trans</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.password_confirmation'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">same</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'请输入确认密码'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">user</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'View'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">modal</span><span class="token punctuation">(</span><span class="token class-name static-context">UserProfile</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span> <span class="token operator">=></span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="进度条-progressbar" tabindex="-1"><a class="header-anchor" href="#进度条-progressbar"><span>进度条 (progressBar)</span></a></h3>
<p><code v-pre>progressBar</code>进度条</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">rate</span><span class="token operator">-></span><span class="token function">progressBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//设置颜色，默认`primary`,可选`danger`、`warning`、`info`、`primary`、`success`</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">rate</span><span class="token operator">-></span><span class="token function">progressBar</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置进度条尺寸和最大值</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">rate</span><span class="token operator">-></span><span class="token function">progressBar</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'success'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'sm'</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="showtreeindialog" tabindex="-1"><a class="header-anchor" href="#showtreeindialog"><span>showTreeInDialog</span></a></h3>
<p><code v-pre>showTreeInDialog</code>方法可以把一个带有层级关系的数组呈现为树形弹窗，比如权限就可以用此方法展示</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 查出所有的权限数据</span></span>
<span class="line"><span class="token variable">$nodes</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token variable">$permissionModel</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">allNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传入二维数组（未分层级）</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">permissions</span><span class="token operator">-></span><span class="token function">showTreeInDialog</span><span class="token punctuation">(</span><span class="token variable">$nodes</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 也可以传入闭包</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">permissions</span><span class="token operator">-></span><span class="token function">showTreeInDialog</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Displayers<span class="token punctuation">\</span>DialogTree</span> <span class="token variable">$tree</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token operator">&amp;</span><span class="token variable">$nodes</span><span class="token punctuation">,</span> <span class="token variable">$roleModel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 设置所有节点</span></span>
<span class="line">    <span class="token variable">$tree</span><span class="token operator">-></span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token variable">$nodes</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 设置节点数据字段名称，默认"id"，"name"，"parent_id"</span></span>
<span class="line">    <span class="token variable">$tree</span><span class="token operator">-></span><span class="token function">setIdColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$tree</span><span class="token operator">-></span><span class="token function">setTitleColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$tree</span><span class="token operator">-></span><span class="token function">setParentColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'parent_id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// $this->roles 可以获取当前行的字段值</span></span>
<span class="line">    <span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token function">array_column</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">roles</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'slug'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token variable">$slug</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$roleModel</span><span class="token operator">::</span><span class="token function">isAdministrator</span><span class="token punctuation">(</span><span class="token variable">$slug</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 选中所有节点</span></span>
<span class="line">            <span class="token variable">$tree</span><span class="token operator">-></span><span class="token function">checkAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="https://cdn.learnku.com/uploads/images/202004/26/38389/s1htW08Iko.png!large" alt=""></p>
<h3 id="内容映射-using" tabindex="-1"><a class="header-anchor" href="#内容映射-using"><span>内容映射 (using)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">status</span><span class="token operator">-></span><span class="token function">using</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'未激活'</span><span class="token punctuation">,</span> <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'正常'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 第二个参数为默认值</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">gender</span><span class="token operator">-></span><span class="token function">using</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'男'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'女'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'未知'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="字符串分割为数组" tabindex="-1"><a class="header-anchor" href="#字符串分割为数组"><span>字符串分割为数组</span></a></h3>
<p><code v-pre>explode</code>方法可以把字符串分割为数组。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">tag</span><span class="token operator">-></span><span class="token function">explode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 可以指定分隔符，默认","</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">tag</span><span class="token operator">-></span><span class="token function">explode</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'|'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="prepend" tabindex="-1"><a class="header-anchor" href="#prepend"><span>prepend</span></a></h3>
<p><code v-pre>prepend</code> 方法用于给 <code v-pre>string</code> 或 <code v-pre>array</code> 类型的值前面插入内容。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 当字段值是一个字符串</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">email</span><span class="token operator">-></span><span class="token function">prepend</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'mailto:'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 当字段值是一个数组</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">arr</span><span class="token operator">-></span><span class="token function">prepend</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'first item'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>prepend</code>方法允许传入闭包参数</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">email</span><span class="token operator">-></span><span class="token function">prepend</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$original</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// $value 是当前字段值</span></span>
<span class="line">    <span class="token comment">// $original 是当前字段从数据库中查询出来的原始值</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 获取其他字段值</span></span>
<span class="line">    <span class="token variable">$username</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">username</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"[<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$username</span><span class="token punctuation">}</span></span>]"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="append" tabindex="-1"><a class="header-anchor" href="#append"><span>append</span></a></h3>
<p><code v-pre>append</code> 方法用于给 <code v-pre>string</code> 或 <code v-pre>array</code> 类型的值后面插入内容。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 当字段值是一个字符串</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">email</span><span class="token operator">-></span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@gmail.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 当字段值是一个数组</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">arr</span><span class="token operator">-></span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'last item'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>append</code>方法允许传入闭包参数</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">email</span><span class="token operator">-></span><span class="token function">append</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$original</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// $value 是当前字段值</span></span>
<span class="line">    <span class="token comment">// $original 是当前字段从数据库中查询出来的原始值</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 获取其他字段值</span></span>
<span class="line">    <span class="token variable">$username</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">username</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"[<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$username</span><span class="token punctuation">}</span></span>]"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="字符串或数组截取-limit" tabindex="-1"><a class="header-anchor" href="#字符串或数组截取-limit"><span>字符串或数组截取 (limit)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 最多显示50个字符</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 如果字段值是数组也支持</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">tags</span><span class="token operator">-></span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="列二维码-qrcode" tabindex="-1"><a class="header-anchor" href="#列二维码-qrcode"><span>列二维码 (qrcode)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">website</span><span class="token operator">-></span><span class="token function">qrcode</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">url</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="可复制-copyable" tabindex="-1"><a class="header-anchor" href="#可复制-copyable"><span>可复制 (copyable)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">website</span><span class="token operator">-></span><span class="token function">copyable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="可排序-orderable" tabindex="-1"><a class="header-anchor" href="#可排序-orderable"><span>可排序 (orderable)</span></a></h3>
<p>通过<code v-pre>Column::orderable</code>可以开启字段可排序功能，此功能需要在你的模型类中<code v-pre>use ModelTree</code>或<code v-pre>use SortableTrait</code>，并且需要继承<code v-pre>Spatie\EloquentSortable\Sortable</code>接口。</p>
<h4 id="sortabletrait" tabindex="-1"><a class="header-anchor" href="#sortabletrait"><span>SortableTrait</span></a></h4>
<p>如果你的数据不是层级结构数据，可以直接使用<code v-pre>use SortableTrait</code>，更多用法可参考<a href="https://github.com/spatie/eloquent-sortable" target="_blank" rel="noopener noreferrer">eloquent-sortable</a>。</p>
<p>模型</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Models</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Model</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Spatie<span class="token punctuation">\</span>EloquentSortable<span class="token punctuation">\</span>Sortable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Spatie<span class="token punctuation">\</span>EloquentSortable<span class="token punctuation">\</span>SortableTrait</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MyModel</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span> <span class="token keyword">implements</span> <span class="token class-name">Sortable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">SortableTrait</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$sortable</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token comment">// 设置排序字段名称</span></span>
<span class="line">        <span class="token string single-quoted-string">'order_column_name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'order'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token comment">// 是否在创建时自动排序，此参数建议设置为true</span></span>
<span class="line">        <span class="token string single-quoted-string">'sort_when_creating'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'order'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">order</span><span class="token operator">-></span><span class="token function">orderable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="modeltree" tabindex="-1"><a class="header-anchor" href="#modeltree"><span>ModelTree</span></a></h4>
<p>如果你的数据是层级结构数据，可以直接使用<code v-pre>use Model</code>，下面以权限模型为例来演示用法</p>
<blockquote>
<p><code v-pre>ModelTree</code>实际上也是继承了<a href="https://github.com/spatie/eloquent-sortable" target="_blank" rel="noopener noreferrer">eloquent-sortable</a>的功能。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Models</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>HasDateTimeFormatter</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Spatie<span class="token punctuation">\</span>EloquentSortable<span class="token punctuation">\</span>Sortable</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Permission</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span> <span class="token keyword">implements</span> <span class="token class-name">Sortable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">HasDateTimeFormatter</span><span class="token punctuation">,</span></span>
<span class="line">        ModelTree <span class="token punctuation">{</span></span>
<span class="line">            <span class="token class-name static-context">ModelTree</span><span class="token operator">::</span><span class="token constant">boot</span> <span class="token keyword">as</span> treeBoot<span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">...</span>    </span>
<span class="line"><span class="token punctuation">}</span>        </span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">order</span><span class="token operator">-></span><span class="token function">orderable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="链接-link" tabindex="-1"><a class="header-anchor" href="#链接-link"><span>链接 (link)</span></a></h3>
<p>将字段显示为一个链接。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// link方法不传参数时，链接的`href`和`text`都是当前列的值</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'homepage'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">link</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传入闭包</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'homepage'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">link</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">admin_url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'users/'</span><span class="token operator">.</span><span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="行操作-action" tabindex="-1"><a class="header-anchor" href="#行操作-action"><span>行操作 (action)</span></a></h3>
<blockquote>
<p>在使用这个方法之前，请先阅读<a href="https://learnku.com/docs/dcat-admin/2.x/use-and-extension-of-rows/8092" target="_blank" rel="noopener noreferrer">自定义操作-行操作</a></p>
</blockquote>
<p>这个功能可以将某一列显示为一个<strong>行操作</strong>的按钮，比如下面所示是一个标星和取消标星的列操作，<br>
点击这一列的星标图标之后, 后台会切换字段的状态，页面图标也跟着切换，具体实现代码如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Extensions<span class="token punctuation">\</span>Grid<span class="token punctuation">\</span>RowAction</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid<span class="token punctuation">\</span>RowAction</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Request</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Star</span> <span class="token keyword">extends</span> <span class="token class-name">RowAction</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$icon</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">row</span><span class="token operator">-></span><span class="token punctuation">{</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">getColumnName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'fa-star'</span> <span class="token punctuation">:</span> <span class="token string single-quoted-string">'fa-star-o'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string heredoc-string"><span class="token delimiter symbol"><span class="token punctuation">&lt;&lt;&lt;</span>HTML</span></span>
<span class="line">&lt;i class="<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">getElementClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> fa <span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$icon</span><span class="token punctuation">}</span></span>">&lt;/i></span>
<span class="line"><span class="token delimiter symbol">HTML<span class="token punctuation">;</span></span></span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$class</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token keyword">class</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$column</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token property">column</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$id</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$model</span> <span class="token operator">=</span> <span class="token variable">$class</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$model</span><span class="token operator">-></span><span class="token punctuation">{</span><span class="token variable">$column</span><span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword type-casting">int</span><span class="token punctuation">)</span> <span class="token operator">!</span><span class="token variable">$model</span><span class="token operator">-></span><span class="token punctuation">{</span><span class="token variable">$column</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$model</span><span class="token operator">-></span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"success"</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified"><span class="token punctuation">\</span>Exception</span> <span class="token variable">$e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">error</span><span class="token punctuation">(</span><span class="token variable">$e</span><span class="token operator">-></span><span class="token function">getMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">parameters</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'class'</span> <span class="token operator">=></span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">modelClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'column'</span> <span class="token operator">=></span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">getColumnName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">getColumnName</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">column</span><span class="token operator">-></span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">modelClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">get_class</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">parent</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">repository</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$grid</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Grid</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'star'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'-'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">action</span><span class="token punctuation">(</span><span class="token class-name static-context">Star</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// here</span></span>
<span class="line">    <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'ID'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">bold</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$grid</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="https://cdn.learnku.com/uploads/images/202005/17/38389/g8F7p8gnsE.png!large" alt=""></p>
<h2 id="帮助方法" tabindex="-1"><a class="header-anchor" href="#帮助方法"><span>帮助方法</span></a></h2>
<h3 id="字符串操作" tabindex="-1"><a class="header-anchor" href="#字符串操作"><span>字符串操作</span></a></h3>
<p>如果当前里的输出数据为字符串，那么可以通过链式方法调用<code v-pre>Illuminate\Support\Str</code>的方法。</p>
<p>比如有如下一列，显示<code v-pre>title</code>字段的字符串值:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>在<code v-pre>title</code>列输出的字符串基础上调用<code v-pre>Str::title()</code>方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>调用方法之后输出的还是字符串，所以可以继续调用<code v-pre>Illuminate\Support\Str</code>的方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ucfirst</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ucfirst</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="数组操作" tabindex="-1"><a class="header-anchor" href="#数组操作"><span>数组操作</span></a></h3>
<p>如果当前列输出的是数组，可以直接链式调用<code v-pre>Illuminate\Support\Collection</code>方法。</p>
<p>比如<code v-pre>tags</code>列是从一对多关系取出来的数组数据：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">array</span> <span class="token punctuation">(</span></span>
<span class="line">  <span class="token number">0</span> <span class="token operator">=></span> </span>
<span class="line">  <span class="token keyword">array</span> <span class="token punctuation">(</span></span>
<span class="line">    <span class="token string single-quoted-string">'id'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'16'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'php'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'created_at'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'2016-11-13 14:03:03'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'updated_at'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'2016-12-25 04:29:35'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">  <span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token number">1</span> <span class="token operator">=></span> </span>
<span class="line">  <span class="token keyword">array</span> <span class="token punctuation">(</span></span>
<span class="line">    <span class="token string single-quoted-string">'id'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'17'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'python'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'created_at'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'2016-11-13 14:03:09'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'updated_at'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'2016-12-25 04:30:27'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>调用<code v-pre>Collection::pluck()</code>方法取出数组的中的<code v-pre>name</code>列</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">array</span> <span class="token punctuation">(</span></span>
<span class="line">    <span class="token number">0</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'php'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'python'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>取出<code v-pre>name</code>列之后输出的还是数组，还能继续调用用<code v-pre>Illuminate\Support\Collection</code>的方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'ucwords'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">array</span> <span class="token punctuation">(</span></span>
<span class="line">    <span class="token number">0</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Php'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Python'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>将数组输出为字符串</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'ucwords'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">implode</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token string double-quoted-string">"Php-Python"</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="混合使用" tabindex="-1"><a class="header-anchor" href="#混合使用"><span>混合使用</span></a></h3>
<p>在上面两种类型的方法调用中，只要上一步输出的是确定类型的值，便可以调用类型对应的方法，所以可以很灵活的混合使用。</p>
<p>比如<code v-pre>images</code>字段是存储多图片地址数组的JSON格式字符串类型：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">images</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// "['foo.jpg', 'bar.png']"</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 链式方法调用来显示多图</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">images</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$images</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">json_decode</span><span class="token punctuation">(</span><span class="token variable">$images</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$path</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string single-quoted-string">'http://localhost/images/'</span><span class="token operator">.</span> <span class="token variable">$path</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="扩展列的显示功能" tabindex="-1"><a class="header-anchor" href="#扩展列的显示功能"><span>扩展列的显示功能</span></a></h2>
<p>可以通过两种方式扩展列功能，第一种是通过匿名函数的方式。</p>
<blockquote>
<p>扩展列功能方法后IDE默认是不会自动补全的，这时候可以通过<code v-pre>php artisan admin:ide-helper</code>生成IDE提示文件。</p>
</blockquote>
<h3 id="匿名函数" tabindex="-1"><a class="header-anchor" href="#匿名函数"><span>匿名函数</span></a></h3>
<p>在<code v-pre>app/Admin/bootstrap.php</code>加入以下代码:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid<span class="token punctuation">\</span>Column</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 第二个参数是自定义参数</span></span>
<span class="line"><span class="token class-name static-context">Column</span><span class="token operator">::</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'color'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;span style='color: <span class="token interpolation"><span class="token variable">$color</span></span>'><span class="token interpolation"><span class="token variable">$value</span></span>&lt;/span>"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后在<code v-pre>model-grid</code>中使用这个扩展：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">color</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#ccc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="扩展类" tabindex="-1"><a class="header-anchor" href="#扩展类"><span>扩展类</span></a></h3>
<p>如果列显示逻辑比较复杂，可以通过扩展类来实现。</p>
<p>扩展类<code v-pre>app/Admin/Extensions/Popover.php</code>:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Extensions</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid<span class="token punctuation">\</span>Displayers<span class="token punctuation">\</span>AbstractDisplayer</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Popover</span> <span class="token keyword">extends</span> <span class="token class-name">AbstractDisplayer</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">display</span><span class="token punctuation">(</span><span class="token variable">$placement</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'left'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"$('[data-toggle=\"popover\"]').popover()"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string heredoc-string"><span class="token delimiter symbol"><span class="token punctuation">&lt;&lt;&lt;</span>EOT</span></span>
<span class="line">&lt;button type="button"</span>
<span class="line">    class="btn btn-secondary"</span>
<span class="line">    title="popover"</span>
<span class="line">    data-container="body"</span>
<span class="line">    data-toggle="popover"</span>
<span class="line">    data-placement="<span class="token interpolation"><span class="token variable">$placement</span></span>"</span>
<span class="line">    data-content="<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">value</span><span class="token punctuation">}</span></span>"</span>
<span class="line">    ></span>
<span class="line">  弹出提示</span>
<span class="line">&lt;/button></span>
<span class="line"><span class="token delimiter symbol">EOT<span class="token punctuation">;</span></span></span></span>
<span class="line"></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后在<code v-pre>app/Admin/bootstrap.php</code>注册扩展类：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid<span class="token punctuation">\</span>Column</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Extensions<span class="token punctuation">\</span>Popover</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Column</span><span class="token operator">::</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'popover'</span><span class="token punctuation">,</span> <span class="token class-name static-context">Popover</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后就能在<code v-pre>model-grid</code>中使用了：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">desciption</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">popover</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'right'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div></div></template>


